<template>
    <el-dialog  :close-on-click-modal="false" :lock-scroll="false" :visible.sync="show" class="buyDialog" :before-close="cancle">
      <div class="buyDialog_content" v-if="product.curSpec" >
        <div class="buyDialog_image" :style="'background-image: url('+product.curSpec.httpImage+')'"  ></div>
        <div class="buyDialog_word">
          <p class="subTitle" v-if="product.curSpec.sku"> {{product.curSpec.sku}}</p>
          <p class="title">{{product.title}}</p>
          <div class="comment"  @click="scrollToModule(2, 'reviews', 32)"><el-rate v-model="product.star_comment" disabled show-score :score-template="product.all_comment_num + ' '+$t('DEFAULT.REVIEWS')" :colors="rateArray"></el-rate></div>
          <p class="subTitle commentContent">{{product.description}}</p>
          <p class="category">{{$t('DEFAULT.COLOR')}}</p>
          <div class="colorList" >
            <p  class="color" v-for="(spec, specItem) in product.color" :key="specItem"   
            :class="{'color_active': spec == product.curSpec.color, 'color_disabled': !colorToSize(product, spec)}" 
            :style="'background-color:' + spec" @click="changeColor(product,spec)">
              <img :src="shadowImg"  class="svgHover icon-shade" v-show="!colorToSize(product, spec)">

            </p>
          </div>
          <p class="category">{{$t('DEFAULT.SPECIFICATIONS')}}</p>
          
          <div class="specList">
            <p class="spec" :class="{'spec_active': spec == product.curSpec.specification_name, 'diabled' : !sizeToColor(product, spec) }" 
              v-for="(spec, specItem) in product.specification" :key="specItem"  @click="changeSpec(product, spec)">{{spec}} </p>
            <p class="clearBoth"></p>
          </div>
          <div class="input_container" v-if="product.import_name ">
            <p v-if="product.product_import_export_type == 1">Input</p><p v-else>Male</p>
            <div class="inputItem">
              <div   class="active">
                <div class="layer"></div>
                <el-image :src="product.import_image"></el-image>
                <p>{{product.import_name}}</p>
              </div>
            </div>
        
          </div>
          <div class="output_container" v-if="product.export_name ">
            <p v-if="product.product_import_export_type == 1">Output</p><p v-else>Female</p>
            <div class="outputItem">
              <div class="active" >
                <el-image :src="product.export_image"></el-image>
                <p>{{product.export_name}}</p>
              </div>
            </div>
        

          </div>
          <div class="material_name" v-show="product.material_name">
            <p class="category ">Material</p>
            <el-button >{{product.material_name}}</el-button>
          </div>
        
          <div class="product_detail_btn">
            <el-button type="search" v-if="product.curSpec.amazon_buy_link" @click="openLink(product.curSpec.amazon_buy_link)">{{$t('DEFAULT.BUYONAMAZON')}}</el-button>
            <el-button v-else>{{$t('DEFAULT.NOSALES')}}</el-button>
          </div>

        </div>
      </div>
  </el-dialog>
</template>

<script>
import { productAmazonButtonClickFunc } from '@/utils/kanban.js'

export default {
  props: {
    show: Boolean,
    closeDialog:Function,
    product: Object
  },
  methods: {
    cancle (){
      this.$emit("closeDialog")
    },
    openLink (link) {
      let url = link
      if (url.indexOf('http')  == -1){
        url = 'http://' +link
      }
      productAmazonButtonClickFunc(this.product.title)
      window.open(url, '_blank')

    },
    colorToSize (item, color){
      let data = item.data
      let m =  data.filter(d=>{
        return d.specification_name == item.curSpec.specification_name  && d.color == color
      })
      return m.length > 0
    },
    sizeToColor (item, size) {
      let data = item.data
      let m =  data.filter(d=>{
        return d.color == item.curSpec.color  && d.specification_name == size
      })
      return m.length > 0
    },
    changeColor (item, color) {
      let isExit = false
      let specData = item.data
      for(let i = 0; i < specData.length; i++ ){
        if(specData[i].color == color){
          if (item.curSpec.specification_name == specData[i].specification_name) {
            item.curSpec = specData[i]
            isExit = true
          }
        }
      }
      if (!isExit) {
        for(let i = 0; i < specData.length; i++ ){
          if(specData[i].color == color){
            item.curSpec = specData[i];
            break;
          }
        }
      }
    },
    changeSpec (item, size){
      let specData = item.data
      let isExit =  false
      for(let i = 0; i < specData.length; i++ ){
        if(specData[i].specification_name == size){
          if (item.curSpec.color == specData[i].color) {
            item.curSpec = specData[i]
            isExit = true
          }
        }
      }

      if(!isExit) {
        for(let i = 0; i < specData.length; i++ ){
          if(specData[i].specification_name == size){
            item.curSpec = specData[i];
             break;
          }
        }
      }
    },
  }

}
</script>

<style lang="scss">
@import './buyDialog.scss';
</style>